<template>
  <div id="container"></div>
</template>

<script>
export default {
  name: 'HelloWorld',
  data () {
    return {
      // 地图实例
      map: null,
      // 点实例
      mk: null
    }
  },
  created () {
    // 加载地图
    this.$nextTick(() => {
      this.initMap()
    })
  },
  methods: {
    // 获取地图
    initMap () {
      // 内网使用-地图对象-在public/index.html引入文件
      let BMap = window.BMap
      console.log('window.BMap', window.BMap)
      // this指向
      const that = this
      // 创建Map实例
      this.map = new BMap.Map('container')
      // 地图中心点-经纬度决定我们加载哪里的地图
      var Point = new BMap.Point(119.28, 26.08)
      // 初始化地图中心点和放大级别
      this.map.centerAndZoom(Point, 11)
      // 限制地图放大等级-为什么限制
      // 1.因为内网时我们访问不到公网百度地图数据资源
      // 2.同时这里地图放大等级也对应着我们下载的瓦片图资源
      this.map.setMinZoom(11)
      this.map.setMaxZoom(15)
      //开启鼠标滚轮缩放
      this.map.enableScrollWheelZoom(true)
      // 4、添加（右上角）平移缩放控件
      this.map.addControl(
        new BMap.NavigationControl({
          anchor: BMAP_ANCHOR_TOP_RIGHT,
          type: BMAP_NAVIGATION_CONTROL_SMALL
        })
      )
      // 添加中心标注点
      this.mk = new BMap.Marker(Point, { enableDragging: true })
      this.map.addOverlay(this.mk)
      // 拖拽点标注事件
      this.mk.addEventListener('dragend', function (e) {
        console.log('执行点位拖拽', e)
        that.getAddrByPoint(e.point)
      })
      // 地图标注点击事件
      this.map.addEventListener('click', function (e) {
        console.log('点击事件', e)
        // 清空点标注
        that.map.clearOverlays()
        // 点标注
        that.map.addOverlay(new BMap.Marker(e.point, { enableDragging: true }))
        // 设置地图中心点
        that.map.panTo(e.point)
        that.getAddrByPoint(e.point)
      })
    },
    // 逆地址解析数据
    getAddrByPoint (Point) {
      console.log('执行解析', Point)
      // 内网使用-地图对象-在public/index.html引入文件
      let BMap = window.BMap
      console.log('new BMap.Geocoder()', new BMap.Geocoder())
      // 这个api是不执行的-因为逆地址解析是需要调用地图api的-只有在public/index.html正常引入百度地图时才会生效
      var geoc = new BMap.Geocoder()
      geoc.getLocation(Point, rs => {
        console.log('点击地址-获取信息', rs)
      })
      console.log('执行解析完毕')
    }
  }
}
// 须知
// 1.内网离线情况下我们访问不了百度数据资源，所有只有把数据资源下载在本地启动服务才可以解决这个问题
// 2.确实可以满足基本的需求
// 3.地图放大，缩小，控件，定位
// 4.加载那里的地图我们首先要下载地图瓦片图，然后地图中心点定位在哪里就会加载的地图
// 5.地图的放大等级我们要控制起来，因为是下载的瓦片图要对应
// 6.瓦片图下载等级最好下载，11-15，刚好铺满全屏，再多就下载很慢
// 7.开发时候我们用npm下载serve，把地图资源从本机运行起来（直接serve）
// 8.所有地址最好写127.0.0.1和localhost方便测试（因为你后续直接断开网线测试时候，你就只能访问自己）
// 瓦片图加载报错-404解决
// 1.瓦片图，就是把一个地图区域根据放大等级分割成等额大小图片进行加载
// 1.首先确定地图中心点经纬度和下载地图瓦片图是否是一致的
// 2.瓦片图下载等级和代码地图限制放大等级是否一样（比如地图放大19级，但是下载地图没有19级图片也会报错）
// 3.用serve启动好本地图片资源后-查看map_load.js文件（一般默认不用改）
// 4..把404图片路径复制到本机浏览器看是否能访问
// 优点
// 1.引入项目比较轻便-确实在内网情况下可以使用(不能访问外网情况下-离线)
// 缺点
// 1.鼠标滚动的时候，会调用百度的api报错，但不影响使用
// 2.百度api会失效，比如逆地址解析，没有建立百度资源连接带身份（就是没有在public/index-正常引入百度地图）
// 3.如果单纯地图展示看，定位-可以，要使用api不满足-目前还没找到解决方案
</script>

<style scoped>
#container {
  width: 100vw;
  height: 100vh;
}
</style>
